<template>
  <baidu-map class="map" center="长沙" :scroll-wheel-zoom="true">
    <!--
        path                点集合
        stroke-color        折线颜色
        stroke-weight       折线宽
        stroke-opacity      折线透明度
        stroke-style        折线的样式，solid或dashed
        editing             是否启用线编辑
        icons               折线图标
        @lineupdate         覆盖物的属性发生变化时触发
    -->
    <bm-polyline
      :path="polylinePath"
      stroke-color="blue"
      :stroke-opacity="0.5"
      :stroke-weight="2"
      :editing="true"
      @lineupdate="updatePolylinePath"
    ></bm-polyline>

    <!--自定义控件-->
    <bm-control anchor="BMAP_ANCHOR_TOP_LEFT">
      <el-button type="primary" @click="addPolylinePoint()">添加节点</el-button>
    </bm-control>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      polylinePath: [
        { lng: 112.920389, lat: 28.21382 },
        { lng: 112.995416, lat: 28.196121 },
        { lng: 112.969401, lat: 28.191919 },
      ],
    };
  },
  methods: {
    updatePolylinePath(e) {
      this.polylinePath = e.target.getPath();
    },
    addPolylinePoint() {
      this.polylinePath.push({ lng: 112.942955, lat: 28.188353 });
    },
  },
};
</script>
<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>
